<template>
  <view class="tabs">
    <view class="tabs-user">
      <uni-section type="line">
      	<uni-notice-bar show-icon scrollable
      		text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
      </uni-section>
<!--  <view class="tabs-user-left">
          <uni-icons type="sound-filled" size="20"></uni-icons>暂无通知
      </view>
      <view class="tabs-user-right"> -->
<!--    <view>
           <uni-icons type="person-filled" size="20"></uni-icons>切换用户
        </view>
        <view>
           <uni-icons type="locked-filled" size="20"></uni-icons>修改密码
        </view> -->
<!--      </view> -->
    </view>
    <view class="tabs-nav">
      <view :class="{'nav-active':active==1}" @click="changeActive(1)">按车型</view>
      <view :class="{'nav-active':active==2}" @click="changeActive(2)">按VIN</view>
      <view :class="{'nav-active':active==3}" @click="changeActive(3)">按编码</view>
      <view :class="{'nav-active':active==4}" @click="changeActive(4)">OE查询</view>
    </view>
    <!-- <view class="tabs-search"></view> -->
  </view>
</template>

<script>
  import {mapMutations} from 'vuex'
  export default {
    name:'tabs',
    options: {
    			styleIsolation: 'shared', // 解除样式隔离
    },
    onLoad: function() {
    },
    data(){
      return{
        active:1,
      }
    },
    methods:{
      ...mapMutations('app',['SET_ACTIVE']),
      changeActive(index){
        this.active = index
        this.SET_ACTIVE(index)
      },
    },
  }
</script>

<style>
  @import url('../../static/style/tabs/tabs.css');
</style>
